<template>
  <div>
    <div style="margin-bottom: 16px">
      <div>
        <a-button type="primary" @click="showAdd">
          <a-icon type="play-circle" theme="twoTone" style="font-size: 15px" />
          新增任务
        </a-button>
        <a-modal
          title="新增脚本任务"
          :visible="visibleAdd"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <a-form-model-item>
            <a-form-item label="脚本项目">
              <a-select
                placeholder="请选择脚本项目"
                style="width: 60%"
                @change="handleChangeProject"
              >
                <a-select-option
                  v-for="project in projectData"
                  :key="project.id"
                >
                  {{ project.name }} ({{ project.id }})
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-form-model-item>
          <a-form-model-item>
            <a-form-item label="本地进程">
              <a-select
                placeholder="请选择运行的本地进程"
                style="width: 60%"
                @change="handleChangeProcess"
              >
                <a-select-option
                  v-for="process in processData"
                  :key="process.id"
                >
                  {{ process.ip }} ({{ process.port }})
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-form-model-item>
        </a-modal>
      </div>
      <a-tooltip placement="top">
        <template slot="title">
          <span>刷新列表</span>
        </template>
        <a-icon
          type="sync"
          style="font-size: 20px; float: right"
          @click="getRunningProject"
        />
      </a-tooltip>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :row-key="(row) => row.id"
      :pagination="{ pageSize: 50 }"
      :scroll="{ y: this.tableHeight }"
    >
      <a slot="action" slot-scope="row">
        <a-tooltip placement="top">
          <template slot="title">
            <span>终止</span>
          </template>
          <a-icon
            type="stop"
            theme="twoTone"
            two-tone-color="#fab27f"
            style="font-size: 20px"
            @click="stopProcess(row)"
          />
          <a> {{ "  |  " }}</a>
          <a-tooltip placement="top">
            <template slot="title">
              <span>查看日志</span>
            </template>
            <a-icon type="eye" theme="twoTone" style="font-size: 20px" />
          </a-tooltip>
        </a-tooltip>
      </a>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: "编号",
    dataIndex: "em_id",
    sorter: true,
    width: 80,
  },
  {
    title: "项目名称",
    dataIndex: "name",
    sorter: true,
    width: 300,
  },
  {
    title: "最后一次执行时间",
    dataIndex: "update_time",
    sorter: true,
    width: 200,
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "ExecutionManagement",
  data() {
    return {
      columns,
      tableHeight: "150px",
      data: [],
      visibleAdd: false,
      addProject: "",
      addProcess: "",
      projectData: [],
      processData: [],
    };
  },
  methods: {
    async stopProcess(row) {
      let processId = row.id;
      let projectId = row.project_id.id;
      let res = await this.EM.stopProcess(projectId, processId);
      if (res.code !== "200") {
        return this.errMessage(res.msg);
      }
      await this.getRunningProject();
      return this.warnMessage(res.msg);
    },
    handleChangeProcess(value) {
      this.addProcess = value;
    },
    handleChangeProject(value) {
      this.addProject = value;
    },
    getTableHeight() {
      let HeaderHeight = 64;
      let FooterHeight = 50;
      let OtherHeight = 120 + 16 + 32 + 5;
      return window.innerHeight - (HeaderHeight + FooterHeight + OtherHeight);
    },
    async getRunningProject() {
      this.data = await this.EM.getRunningProject();
      this.infoMessage("更新数据列表");
    },
    async showAdd() {
      this.projectData = await this.ProjectService.getProject();
      this.processData = await this.ProcessService.getProcess();
      this.processData = this.processData.filter((process) => {
        return !process.name && process.status;
      });
      this.visibleAdd = true;
    },
    async handleOk() {
      if (this.addProject === "" || this.addProcess === "") {
        return this.warnMessage("请选择！不能为空");
      }
      let res = await this.EM.startProcess(this.addProject, this.addProcess);
      if (res.code !== "200") {
        return this.errMessage(res.msg);
      }
      this.infoMessage(res.msg);
      this.visibleAdd = false;
      await this.getRunningProject();
    },
    handleCancel() {
      this.visibleAdd = false;
    },
    infoMessage(Message) {
      this.$message.info(Message);
    },
    warnMessage(Message) {
      this.$message.warn(Message);
    },
    errMessage(Message) {
      this.$message.error(Message);
    },
    successMessage(Message) {
      this.$message.success(Message);
    },
  },
  mounted() {
    this.getRunningProject();
    this.tableHeight = this.getTableHeight();
    window.onresize = () => {
      return (() => {
        this.tableHeight = this.getTableHeight();
      })();
    };
  },
};
</script>

<style scoped></style>
